<!-- 个人中心 -->
<template>
	<view class="wrap-box">
		<view class="user-box">
			<block v-if="template.length" v-for="(item, index) in template" :key="index">
				<!-- 搜索 -->
				<sh-search v-if="item.type === 'search'" :detail="item" :bgcolor="bgcolor"></sh-search>
				<!-- 轮播 -->
				<sh-banner v-if="item.type === 'banner'" :detail="item.content" @getbgcolor="getbgcolor"></sh-banner>
				<!-- 菜单 -->
				<sh-menu v-if="item.type === 'menu'" :detail="item.content" :menu="item.content.style" :imgW="94">
				</sh-menu>
				<!-- 推荐商品 -->
				<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content">
				</sh-hot-goods>
				<!-- 广告魔方 -->
				<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
				<!-- 优惠券 -->
				<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
				<!-- 秒杀 -->
				<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
				<!-- 拼团 -->
				<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
				<!-- 个人信息 -->
				<sh-userinfo v-if="item.type === 'user'" :detail="item.content"></sh-userinfo>
				<!-- 订单卡片 -->
				<sh-order v-if="item.type === 'order-card'" :detail="item.content"></sh-order>
				<!-- 功能列表 -->
				<sh-nav v-if="item.type === 'nav-list'" :detail="item.content"></sh-nav>
				
				<block v-if="item.type == 'wallet-card'">
					<view class="bgc" v-if="is_auth == 0" @tap="showModal = true">
						点击认证VIP会员
					</view>
				</block>
				
				<sh-navb v-if="item.type === 'nav-list'"></sh-navb>
				<!-- 钱包 -->
				<sh-wallet v-if="item.type === 'wallet-card'" :detail="item.content"></sh-wallet>

				


				<!-- 九宫格列表 -->
				<sh-grid v-if="item.type === 'grid-list'" :detail="item.content"></sh-grid>
				<!-- 富文本 -->
				<sh-richtext v-if="item.type === 'rich-text'" :detail="item.content"></sh-richtext>
				<!-- 功能标题 -->
				<sh-title-card v-if="item.type === 'title-block'" :detail="item.content"></sh-title-card>
				<!-- 直播 -->
				<!-- #ifdef MP-WEIXIN -->
				<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
				<!-- #endif -->
			</block>
			<!-- 版本号 -->
			<!-- <view class="foot_box">
				<view class="copyright y-f" v-if="info">
					<view class="code1">{{ info.copyright[0] }}</view>
					<view class="code2">{{ info.copyright[1] }} {{ info.version }}</view>
				</view>
			</view> -->




			<shopro-modal v-model="showModal" style="z-index: 88;">
				<block slot="modalContent">
					<view class="modal-box">
						<u-icon name="close" class="florext"></u-icon>
						<view class="modal-head">
							<image class="modal-head-img" :src="$IMG_URL + '/imgs/modal_bg.png'" mode=""></image>
							<text class="modal-head-title">申请VIP</text>
						</view>
						<input class="inp" type="text" v-model="inputName" placeholder="请输入姓名"
							placeholder-class="pl-inp" />
						<input class="inp" type="number" v-model="phoneUser" placeholder="请输入手机号"
							placeholder-class="pl-inp" />
						<view class="post-btn ">
							<view class="bgc1"  @tap="addUser">
								申请
							</view>
							<view class="bgc2" @tap="showModal = false">
								取消
							</view>
						</view>
						
						<view class="" style="height: 100rpx; line-height: 100rpx;" @tap="phonenifo">
							VIP认证需致电客服<text style="color: #f00; margin-left: 10rpx;">400-686-7990</text>
						</view>
					</view>
				</block>
			</shopro-modal>




			<!-- 关注弹窗 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal></shopro-notice-modal>
			<!-- 登录提示 -->
			<shopro-login-modal></shopro-login-modal>
		</view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>.

<script>
	import Wechat from '@/common/wechat/wechat';

	import shSearch from './components/sh-search.vue';
	import shBanner from './components/sh-banner.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shMenu from './components/sh-menu.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shNav from './components/sh-nav.vue';
	// import shNavb from './components/sh-nab.vue';
	import shUserinfo from './components/sh-userinfo.vue';
	import shOrder from './components/sh-order.vue';
	import shWallet from './components/sh-wallet.vue';
	import shGrid from './components/sh-grid.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			shSearch,
			shBanner,
			shHotGoods,
			shMenu,
			shAdv,
			shCoupon,
			shSeckill,
			shGroupon,
			shRichtext,
			shNav,
			// shNavb,
			shUserinfo,
			shOrder,
			shWallet,
			shGrid,
			shTitleCard,
		},
		data() {
			return {
				platform: uni.getStorageSync('platform'), //当前平台。
				isRefresh: false, //更新
				scrollTop: 0, //页面滚动距离
				bgcolor: '',
				is_auth: '',
				showModal: false,
			};
		},
		computed: {
			...mapState({
				initData: state => state.init.initData, //初始化数据
				template: state => state.init.templateData.user, //模板数据
				userInfo: state => state.user.userInfo,
				orderNum: state => state.user.orderNum,
				cartNum: state => state.cart.cartNum,
				forceOauth: state => state.user.forceOauth
			}),
			info() {
				if (this.initData) {
					return this.initData.info;
				}
			},
			popupUser() {
				if (this.initData.popup) {
					return this.initData.popup.content.user;
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onLoad() {
			this.getUser()
		},
		onShow() {
			this.$store.commit('CART_NUM');
			this.init();
		},
		methods: {
			...mapActions(['getUserInfo', 'getOrderNum']),
			// 初始化
			init() {
				return Promise.all([this.getUserInfo(), this.getOrderNum()])
					.then(() => {
						uni.stopPullDownRefresh();
					})
					.catch(() => {
						uni.stopPullDownRefresh();
					});
			},

			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			getbgcolor(e) {
				this.bgcolor = e;
			},

			getUser() {
				this.$api('user.userInfo').then((res => {
					this.is_auth = res.data.is_auth
					console.log('this.is_auth', this.is_auth)
				}))
			},

			addUser() {
				this.$api('user.userauth', {
					name: this.inputName,
					phone: this.phoneUser,
				}).then((res => {
					if (res.code == 1) {
						this.show = false
						
						// this.$Router.push({
						// 	path: this.pathRoter,
						// 	query: this.parmas
						// });
					} else {
						[this.inputName, this.phoneUser] = ['']
					}
				}))
			},

			phonenifo() {
				uni.makePhoneCall({
					phoneNumber: '4006867990' //仅为示例
				});
			},
		}
	};
</script>

<style lang="scss">
	.user-box {
		overflow-x: hidden;
		position: relative;
		overflow-y: auto;
		// height: 100%;
	}


	.modal-box {
		background: #fff;
		width: 610rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		position: relative;
		
		.florext {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}

		.modal-head-img {
			width: 100%;
			height: 213rpx;
		}

		.modal-head-title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #6d5028;
			line-height: 42rpx;
		}

		.inp {
			width: 501rpx;
			height: 78rpx;
			border: 1rpx solid rgba(168, 112, 13, 1);
			margin: 30rpx auto 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #6d5028;

			.pl-inp {
				color: #bd9560;
			}
		}

		.radio {
			width: 500rpx;
			padding: 0 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(200, 150, 61, 1);
			margin-bottom: 20rpx;

			.radio-inp {
				transform: scale(0.7);
				margin-right: 10rpx;
			}
		}

		.post-btn {
			width: 492rpx;
			height: 70rpx;
			margin: 0 auto;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-bottom: 60rpx;
		}
		
		.bgc1 {
			padding: 10rpx 30rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		}
		
		.bgc2 {
			padding: 10rpx 30rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		}
		
		// .post-btn1 {
		// 	width: 492rpx;
		// 	height: 70rpx;
		// 	background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		// 	box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		// 	border-radius: 35rpx;
		// 	font-size: 28rpx;
		// 	font-family: PingFang SC;
		// 	font-weight: 500;
		// 	color: rgba(255, 255, 255, 1);
		// 	padding: 0;
		// 	// margin-bottom: 60rpx;
		// }
	}

	// 服务协议
	.modal-wrap {
		/deep/ .cu-modal {
			z-index: 99999;
		}
	}

	.bgc {
		width: 100%;
		height: 126rpx;
		line-height: 126rpx;
		text-align: center;
		color: #A5673F;
		margin: 0 10rpx;
		border-radius: 20rpx;
		background-image: url('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/bj@2x.png');
		background-size: 100%;
		 background-repeat: repeat-x;
	}

	// 微信登录蒙层
	.login-box {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background: none;
	}

	// 顶部
	.transtion-head {
		height: 120rpx;
		background: #fff;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		transition: all 0.2s linear;
		transform: translateY(-120rpx);
		border-bottom: 1rpx solid #f2f2f2;
	}

	.transtion-head--active {
		height: 120rpx;
		background: #fff;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		transition: all 0.2s linear;
		transform: translateY(0rpx);
		border-bottom: 1rpx solid #f2f2f2;
	}

	.foot_box {
		padding-top: 200rpx;
		padding-bottom: calc(var(--window-bottom) + 30px);
		margin-bottom: 50rpx;
	}

	.copyright {
		color: #999;

		.code1 {
			font-size: 24rpx;
		}

		.code2 {
			font-size: 20rpx;
			margin-top: 10rpx;
		}
	}
</style>
